<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8"> 
	<title>Tangram-Grid-Grouped-Header</title>
	<script type="text/javascript" src="../tangram/tangram-1.3.9.source.js"></script>
	<script type="text/javascript" src="../tangram/tangram.baseUI.source.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.columnfreeze.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.columndragsort.js"></script>
	<link rel="stylesheet" href="../resources/tangram.grid.css" />
</head>
<body>
	<h2>列头分组 & 列头拖动排序</h2>
<div id="groupedheadergrid"></div>
<script type="text/javascript">
	//初始化
	var griddemo = new baidu.ui.Grid({
		element:"groupedheadergrid",
		columns:[
			{field:'id',width:30,renderer:'checkbox'},
			{field:'name',header:"机器名称",width:200},
			{header:"机器信息",columns:[
				{field:'creator',header:"创建人",width:100},
				{field:'dataKey',header:"dataKey",width:400,align:"right",renderer:function(data){return data.cellvalue+"-formated";}},
				{field:'lastVersion',header:"lastVersion",width:200}
			]},
			{field:'createTime',header:"创建时间",width:180,resizable:false,sortable:false}
		],
		height:300,
		selectMode:1,
		freeze:2,
		url:"noahdata.json",
		ajaxOption:{
			method:"POST",
			data:"a=1"
		},
		columndraggable:true,//列头可以拖动排序
		order:"asc",//初始状态
		orderBy:"2-2"
	});
	
	//ajax加载数据
	griddemo.request({b:2,a:3});
	
window.onresize = function(){//容器大小发生变化
	griddemo.resize();//重新调整大小
}
</script>
<input type="button" value="Hide Fix Column"  onclick="griddemo.hideColumn(1);" />
<input type="button" value="Show Fix Column"  onclick="griddemo.showColumn(1);" />
<input type="button" value="Hide Column 2"  onclick="griddemo.hideColumn(2);" />
<input type="button" value="Show Column 2"  onclick="griddemo.showColumn(2);" />
<input type="button" value="Order by dataKey desc "  onclick="griddemo.reOrder('2-1','desc');" />
</body>
</html>
